import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:xmshop/app/routes/app_pages.dart';
import 'package:xmshop/app/services/screenAdapter.dart';
import '../controllers/category_controller.dart';
import 'package:xmshop/app/services/httpsClient.dart';

class CategoryView extends GetView<CategoryController> {
  const CategoryView({super.key});
  Widget _progressIndicator() {
    return const Center(child: CupertinoActivityIndicator());
  }

  Widget _leftCate() {
    return SizedBox(
      width: ScreenAdapter.width(280),
      height: double.infinity,
      child: Obx(
        () => controller.leftCategoryList.isNotEmpty
            ? ListView.builder(
                itemCount: controller.leftCategoryList.length,
                itemBuilder: ((context, index) {
                  return SizedBox(
                    width: double.infinity,
                    height: ScreenAdapter.height(180),
                    child: InkWell(
                      onTap: () {
                        // controller.getRightCategoryData(
                        //   controller.leftCategoryList[index].sId!,
                        // );
                        controller.changeIndex(
                          index,
                          controller.leftCategoryList[index].sId,
                        );
                      },
                      child: Stack(
                        children: [
                          Obx(
                            () => Align(
                              alignment: Alignment.centerLeft,
                              child: Container(
                                margin: EdgeInsets.fromLTRB(
                                  ScreenAdapter.width(5),
                                  0,
                                  0,
                                  0,
                                ),
                                width: ScreenAdapter.width(12),
                                height: ScreenAdapter.height(46),
                                color: controller.selectIndex.value == index
                                    ? Colors.amberAccent
                                    : Colors.white,
                              ),
                            ),
                          ),
                          Obx(
                            () => Center(
                              child: Text(
                                "${controller.leftCategoryList[index].title}",
                                style: TextStyle(
                                  fontSize: ScreenAdapter.fontSize(36),
                                  fontWeight:
                                      controller.selectIndex.value == index
                                      ? FontWeight.bold
                                      : FontWeight.normal,
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  );
                }),
              )
            : _progressIndicator(),
      ),
    );
  }

  Widget _rightCate() {
    return Expanded(
      child: SizedBox(
        height: double.infinity,
        child: Obx(
          () => controller.rightCategoryList.isNotEmpty
              ? GridView.builder(
                  itemCount: controller.rightCategoryList.length,
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 3,
                    crossAxisSpacing: ScreenAdapter.width(40),
                    mainAxisSpacing: ScreenAdapter.height(20),
                    childAspectRatio: 240 / 340,
                  ),
                  itemBuilder: ((context, index) {
                    // var picUrl =
                    //     "https://xiaomi.itying.com/${controller.rightCategoryList[index].pic}";
                    return InkWell(
                      onTap: () {
                        Get.toNamed(
                          Routes.PRODUCT_LIST,
                          arguments: {
                            "cid": controller.rightCategoryList[index].sId,
                          },
                        );
                      },
                      child: Column(
                        children: [
                          Container(
                            alignment: Alignment.center,
                            width: double.infinity,
                            child: Image.network(
                              HttpsClient.replaeUri(
                                controller.rightCategoryList[index].pic,
                              ),
                              fit: BoxFit.fitHeight,
                              errorBuilder: (context, error, stackTrace) {
                                return Container(
                                  color: Colors.grey[200],
                                  child: Icon(
                                    Icons.broken_image,
                                    color: Colors.grey[400],
                                  ),
                                );
                              },
                            ),
                          ),
                          Padding(
                            padding: EdgeInsets.fromLTRB(
                              0,
                              ScreenAdapter.height(10),
                              0,
                              0,
                            ),
                            child: Text(
                              "${controller.rightCategoryList[index].title}",
                              style: TextStyle(
                                fontSize: ScreenAdapter.fontSize(32),
                              ),
                            ),
                          ),
                        ],
                      ),
                    );
                  }),
                )
              : _progressIndicator(),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Container(
          width: ScreenAdapter.width(840),
          height: ScreenAdapter.height(96),
          decoration: BoxDecoration(
            color: const Color.fromRGBO(246, 246, 246, 1),
            borderRadius: BorderRadius.circular(30),
          ),
          child: InkWell(
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Padding(
                  padding: EdgeInsetsGeometry.fromLTRB(
                    ScreenAdapter.width(34),
                    0,
                    ScreenAdapter.width(10),
                    0,
                  ),
                  child: Icon(Icons.search),
                ),
                Text(
                  "手机",
                  style: TextStyle(fontSize: ScreenAdapter.fontSize(32)),
                ),
              ],
            ),
            onTap: () {
              Get.toNamed(Routes.SEARCH);
            },
          ),
        ),
        centerTitle: true,
        backgroundColor: Colors.white,
        actions: [
          IconButton(
            onPressed: () {},
            icon: Icon(Icons.message_outlined, color: Colors.black45),
          ),
        ],
        elevation: 0,
      ),
      body: Row(children: [_leftCate(), _rightCate()]),
    );
  }
}
